<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			header{
				margin-left: 50px;
				width: 1200px;
				height: 60px;
				border: 2px solid red;
				overflow: hidden;
			}
			header a{
				margin-left:30px ;
				float: left;
				pasition:relative;
				display: block;
			}
			header ul{
				margin-left:800px ;
			}
			header ul li {
				float: left;
				list-style: none;
				height: 50px;
				line-height: 50px;	
							
			}
			header ul li a{
				text-indent: 2em;
			}
			section{
				float: left ;
				width: 1200px;
				margin-left: 50px;
				margin-top: 20px;
				border: 2px solid red;
				overflow: hidden;				
			}
			section .photo{
				float: left;
			}
			section .log-in{
				float: left;
				width: 400px;
				height: 297px;
				
				pasition:relative;
				top: 20px;
				display: block;
				border: 2px solid red;
				margin-left:800px ;
			}
			footer{
				width: 1200px;
				border: 2px solid red;
				margin-top:5px ;
				margin-left:50px ;
				float: left ;
				overflow: hidden;
				
			}
			footer img{
				float: left ;
			}
			footer ul{
				list-style: none;
				margin-left:400px;
				float: left ;
				
			}
			footer ul li{
				float: left ;
				height: 50px;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<header>
			<a href="#" target="_blank" ><img src="../img/163logo.gif"></a>
			<ul>
                  <li><a href="#">免费邮</a></li>
                  <li><a href="#"> 企业邮</a></li>
                  <li><a href="#">VIP邮箱</a></li>
                  <li><a href="#">帮助</a></li>
               </ul>
		</header>
		<section>
			<img src="../img/imap.jpg" />
			<ul>
				<li> 163/126/yeah三大免费邮箱均默认开放</li>
			    <li> 全面支持iPhone/iPad及Android等系统</li>
			    <li> 客户端、手机与网页，实现发送、阅读邮件</li>
			</ul>
			<div class="log-in">
				<p><img class="photo" src="../img/loginIcon.gif" /> 普通登录</p>
				<table>
					<tr>
						<th>用户名</th>
						<td>
							<input type="text" name="username" />
						</td>
					</tr>
					
					<tr>
						<th>密码</th>
						<td>
							<input type="text" name="psw" />
						</td>
					</tr>
					
					<tr>
						<th>版本</th>
						<td>
							<select name="edition">
								<option value="默认">默认</option>
								<option value="2018">2018</option>
                                <option value="2017">2017</option>
                                <option value="2016">2016</option>
                                <option value="2015">2015</option>
							</select>
						</td>
					</tr>
					
					<tr>
					<td>
						<span class="retract"><input type="checkbox" value="autoLogin"/>自动登录</span>
						<span class="retract"><input type="checkbox" value="ssl"/>SSL</span>
					</td>
					</tr>
					
					<tr>
					<td>
						<input type="submit"  value="注册"/>
						<input type="button"  value="登录"/>
					</td>
					</tr>
					
				</table>
			</div>
		</section>
		<footer>
			<img src="../img/netease_logo.gif" />
			<ul>
				  <li><a href="#">关于网易</a></li>
                  <li><a href="#">免费邮</a></li>
                  <li><a href="#">官方博客</a></li>
                  <li><a href="#">客户服务</a></li>
                  <li><a href="#">咨询政策</a></li>
                  <li><a href="#"> 网易公司版权所有 &copy; 2015-2018</a></li>
                  
               </ul>
		</footer>
	</body>
</html>
